<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>注册页</title>
    <link type="text/css" href="css/register.css" rel="stylesheet" />
    <link type="text/css" href="css/common.css" rel="stylesheet" />
    <link type="text/css" href="css/reset.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/x-icon" href="images/nangua.jpg" media="screen" />
</head>

<body>

<div class="index">
    <jsp:include page="head.jsp"></jsp:include>
    <div class="hr_5"></div>
    <div class="register_content f_f width_1200_center">
        <div class="content_position">您当前的位置：<a href="javascript:">首页</a><span>&gt;</span><a href="javascript:">用户注册</a></div>
        <div class="register_content_top f_z15"><a href="#">注册会员</a><span>Register</span></div>
        <div class="hr_5"></div>
        <div class="register_content_con_">
            <div class="register_content_con center">
                <div class="hr_5"></div>
                <form action="userRegister.do" method="post" id="user_form" onsubmit="checkall()">
                    <table>
                        <tr>
                            <th class="name1">用户名：</th>
                            <td class="name2" colspan="2"><input name="user_name" class="name22 user_name_" type="text" placeholder=" 如：absd325" onblur="check1(this)"required/></td>
                            <td class="name3"><span class="user_name_ms text_te"><i class="show_sh"></i>字母开头，允许6-25字节，允许字母数字下划线。<!--很抱歉，该用户名已经被使用--></span></td>
                        </tr>
                        <tr>
                            <th class="mobile1">手机号：</th>
                            <td class="mobile2" colspan="2"><input name="user_phone" class="mobile22 mobile_" type="text" placeholder=" 如：18778863482" onblur="check2(this)" required></td><!-- autocomplete="off"-->
                            <td class="mobile3"><span class="mobile_ms text_te"><i class="show_sh"></i>请输入正确的手机号</span></td>
                        </tr>
                        <tr>
                            <th class="ps1">密码：</th>
                            <td class="ps2" colspan="2"><input name="user_pwd" class="ps22 user_ps_" type="password" placeholder=" 密码" onblur="check3(this)" required/></td>
                            <td class="ps3"><span class="user_ps_ms text_te"><i class="show_sh"></i>请输入密码，只能是6到18位数字、下划线、字母组成。</span></td>
                        </tr>
                        <tr>
                            <th class="pss1">确认密码：</th>
                            <td class="pss2" colspan="2"><input name="user_password1" class="pss22 user_ps1_" type="password" placeholder=" 确认密码" onblur="check4(this)" required/></td>
                            <td class="pss3"><span class="user_ps1_ms text_te"><i class="show_sh"></i>请重新输入密码<!--密码不一致--></span></td>
                        </tr>
                        <tr>
                            <th class="catcha1">验证码：</th>
                            <td class="catcha2"><input name="catcha" class="catcha22 catcha_" type="text" placeholder=" 验证码" onblur="check5(this)"required/></td>
                            <td class="catcha3" align="right">
                                <a href="javascript:void(0)" >
                                    <img  width="100" id="catcha_image" height="30" src="checkCode.do"
                                          alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'"></a>
                            </td>
                            <td class="catcha4"><span class="catcha_ms text_te"><i class="show_sh"></i>请输入验证码，点击图换一张</span></td>
                        </tr>
                        <tr>
                            <th class=""></th>
                            <td class="reg1" colspan="2"><input class="reg11" id="reg11" type="checkbox" checked="checked" required onblur="check6()"/><span><label for="reg11" onclick="check6()">我已阅读并同意注册协议</label></span></td>
                            <td class=""><span class="reg_ms text_te"><i class="succeed_su"></i>验证成功</span></td>
                        </tr>
                        <tr>
                            <th class="" height="45"></th>
                            <td class="reg_button" colspan="2">
<%--                                <a href="javascript:void(0)" class="reg_button1" name="submit">提交注册</a>--%>
                                <input class="press_button" type="submit" name="submit" value="提交注册" /></td>
                            <td class=""><span class="text_te"><i class="show_sh"></i>已注册&mdash;</span><span class="text_txt" ><a href="user_login.php">直接登录</a></span></td>
                        </tr>
                    </table>
                </form>
                <div class="hr_10"></div>
                    </div>
            <div class="hr_15"></div>
        </div>

    </div>
    <div class="hr_8"></div>
  <jsp:include page="foot.jsp"></jsp:include>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><!--必须得放在第一的位置-->
<%--<script type="text/javascript" src="js/register.js"></script>--%>
<%--<script type="text/javascript" src="js/common.js"></script>--%>
<script>
    function getLength(str){
        if (str == null) return 0;
        /*if (typeof str != "string"){
           str += "";
        } */
        return str.replace(/[^\x00-\xff]/g,"01").length;
    }
    //检查 全部
    function checkall(){
        return false;
    }

    function check1(t){
        /*用户名账号*/
            var user_name=$(".user_name_");
            var len=getLength(t.value);
            var reg=/^[a-zA-Z][a-zA-Z0-9_]{5,24}$/;
            //不能为空
            if(t.value==""){

                $('.user_name_ms').html('<i class="fail_fa"></i>用户名不能为空。');
                user_name.val("");

            }
            //长度小于5个字符
            else if(len<6){
                $('.user_name_ms').html('<i class="fail_fa"></i>长度小6个字符。');
                user_name.val("");
            }
            //长度超过25个字符
            else if(len>25){
                $('.user_name_ms').html('<i class="fail_fa"></i>长度超过25个字符。');
                user_name.val("");
            }
            //含有非法字符
            else if(!reg.test(t.value)){
                $('.user_name_ms').html('<i class="fail_fa"></i>用户名格式不对。');
                user_name.val("");
            }
            //验证成功
            else{
                $('.user_name_ms').html('<i class="succeed_su"></i>验证成功。');
            }



    }

    function check2(t){
        /*手机号*/
        var mobile=$(".mobile_");
        let user_phone = mobile.val();
        var pho=/^1[3|4|5|8][0-9]\d{4,8}$/;
            //含有非法字符
            /*var emai=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            var phon=/^1[3|4|5|8][0-9]\d{4,8}$/;
            if(!emai.test(this.value)||!phon.test(this.value))*//*这样不可以*/
            $.ajax({
                url:"queryUserByPhone.do",
                data:{user_phone:user_phone},
                dataType: "json",
                success:function (msg){
                    if(t.value==""){
                        $('.mobile_ms').html('<ia class="fail_fa"></ia>手机号不能为空。');
                        mobile.val("");
                    }else if(!pho.test(user_phone)){
                        $('.mobile_ms').html('<i class="fail_fa"></i>手机号格式不正确。');
                        mobile.val("");
                    }else if(msg==true){
                        $('.mobile_ms').html('<i class="fail_fa"></i>手机号已经存在。');
                        mobile.val("");
                        //验证成功
                    }else{
                        $('.mobile_ms').html('<i class="succeed_su"></i>验证成功。');
                        return true;
                    }                }
            })

    }

    function check3(t) {
        /*密码*/
        var user_ps = $(".user_ps_");
        //含有非法字符
        /*var len=getLength(this.value);
        var reg=user_ps.val().match(/^\w+$/);*/

        if (t.value == "") {
            $('.user_ps_ms').html('<i class="fail_fa"></i>密码不能为空。');
            user_ps.val("")
        } else if (!(/^[A-Za-z0-9_]{6,18}$/).test(t.value)) {
            $('.user_ps_ms').html('<i class="fail_fa"></i>密码只能是6到18位数字、下划线、字母。');
            user_ps.val("")
        }
        //验证成功
        else {
            $('.user_ps_ms').html('<i class="succeed_su"></i>验证成功。');
        }
    }

    function check4(t){
        /*确认密码*/
        var user_ps1=$(".user_ps1_");
            if($(".user_ps_").val()==""){
                $('.user_ps1_ms').html('<i class="fail_fa"></i>新密码不能为空。');
                user_ps1.val("");
            }else if(t.value!=$(".user_ps_").val()){
                $('.user_ps1_ms').html('<i class="fail_fa"></i>密码不一致。');
                user_ps1.val("");
            }else{
                $('.user_ps1_ms').html('<i class="succeed_su"></i>验证成功。');
            }
    }

    function check5(t){
        $.ajax({
            url:"catcha.do",
            dataType:"text",
            success:function (msg){
                var catcha=$(".catcha_");
                    if(t.value==""){
                        $('.catcha_ms').html('<i class="fail_fa"></i>验证码不能为空。');
                        return false;
                    }else if(t.value==msg){
                        $('.catcha_ms').html('<i class="succeed_su"></i>验证成功。');
                        return true;
                    }else if(t.value!=msg){
                        $('.catcha_ms').html('<i class="succeed_su"></i>验证码不正确。');
                        catcha.val("");
                    }

            }
        })
    }

    function check6(){
        /*点击选项，同意注册协议*/
        var $reg_ms=$(".reg_ms");
            if($(".reg11").is(":checked")){
                $reg_ms.html('<i class="succeed_su"></i>验证成功</span>');
                return true;
            }else{
                $reg_ms.html('<i class="fail_fa"></i>验证失败</span>');
                return false;
            }
    }
</script>

</body>
</html>